<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <style>
</style>
  </head>
  <#include "../head.html" parse=true/>
  <body >
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            <small>系统管理>>角色管理</small>
          </h1>
        </section>
        <section class="content">
          <div class="row">
            <div class="col-xs-12">

              <div class="box">
       <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">请选择查询要素</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
           <form class="form-horizontal">
               <div class="box-body">
                   <div class="form-group">
                       <label for="roleName_query"  class="col-sm-1 control-label">映射</label>
                       <div class="col-sm-3">
                           <input type="text" class="form-control" id="roleName_query" />
                       </div>
                       <div class="col-sm-8">
                           <a  class="btn btn-info" id="query" style="margin-left:10%">查询</a>&nbsp;&nbsp;
                       </div>
                   </div>
               </div>
               <!-- /.box-body -->
<!--               <div class="box-footer">

               </div>-->
               <!-- /.box-footer -->
           </form>
          </div> 
 
 
                 <div class="box-header">
                  <h3 class="box-title">权限列表</h3>
                 </div><!-- /.box-header -->
                <div class="box-body" id="roleList">

                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div><!-- /.col -->
          </div><!-- /.row -->



            <div class="modal fade" id="editMenuModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"   >
                <div class="modal-dialog" role="document" style="width: 500px;" >
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title"  style="font-weight: bold;" >编辑菜单</h4>
                        </div>

                        <div class="modal-body">
                            <form class="form-horizontal">
                                <div class="box-body">
                                    <div class="form-group">
                                        <div class="row">

                                            <label  class="col-sm-4 control-label">选择菜单</label>
                                            <div class="col-sm-8" id="menuList">
                                                <select title="请勾选菜单" id='menuSelect' data-selected-text-format="count > 3 " class='selectpicker' data-style="btn-success"   data-width="auto" multiple >
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.box-body -->
                            </form>
                        </div>

                        <div class="modal-footer">
                            <button type="button" id="save_editMenuModal"   class="btn btn-primary" data-dismiss="modal"  >保存</button>
                            <button type="button" id="close_editMenuModal"   class="btn btn-default" data-dismiss="modal"  >关闭</button>
                        </div>

                    </div>
                </div>
            </div>


            <div class="modal fade" id="editPermModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"   >
                <div class="modal-dialog" role="document" style="width: 700px;" >
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title"  style="font-weight: bold;" >编辑权限</h4>
                        </div>

                        <div class="modal-body">
                            <form class="form-horizontal">
                                <div class="box-body">
                                    <div class="form-group">
                                        <div class="row">

                                            <label  class="col-sm-2 control-label">选择权限</label>
                                            <div class="col-sm-10" id="permList">
                                                <select title="请勾选权限" id='permSelect' data-selected-text-format="count > 3 " class='selectpicker' data-style="btn-success"   data-width="auto" multiple >
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.box-body -->
                            </form>
                        </div>

                        <div class="modal-footer">
                            <button type="button" id="save_editPermModal"   class="btn btn-primary" data-dismiss="modal"  >保存</button>
                            <button type="button" id="close_editPermModal"   class="btn btn-default" data-dismiss="modal"  >关闭</button>
                        </div>

                    </div>
                </div>
            </div>


 
 
        </section>
 
      </div>
   
<#include "../foot.html" parse=true/>


      <input type="hidden" id="uptRoleId" value="" >

    
    <!-- page script -->
    <script type="text/javascript">
     $(function () {

         $('.child').click(function () {
             console.log("fadsfs");

         });


         $("#query").click(function(){

             queryData();

         });// end click query

         $("#save_editMenuModal").click(function(){

             var menuIds = $("#menuSelect").val();
             var roleId = $("#uptRoleId").val();

             $.ajax({
                 type : "get",
                 url : "${request.contextPath}/permission/editRoleHasMenu",
                 data : {roleId : roleId,menuIds:menuIds},
                 success : function(data) {

                     if(data=="1"){
                         alert("编辑完成!");
                         $('#editMenuModal').modal('hide');
                     }else{
                         alert("新增失败!");
                         return false;
                     }

                     queryData();

                 }// end success
             });//end ajax


         });// end save_editMenuModal


         $("#save_editPermModal").click(function(){

             var permIds = $("#permSelect").val();
             var roleId = $("#uptRoleId").val();

             $.ajax({
                 type : "get",
                 url : "${request.contextPath}/permission/editRoleHasPerm",
                 data : {roleId : roleId,permIds:permIds},
                 success : function(data) {

                     if(data=="1"){
                         alert("编辑完成!");
                         $('#editPermModal').modal('hide');
                     }else{
                         alert("新增失败!");
                         return false;
                     }


                 }// end success
             });//end ajax


         });// end save_editMenuModal



     });
 
    

    
    $("#reset").click(function(){
     	$("input[type=text]").val("");
    });
    

 function showEditMenu(id){

     $("#uptRoleId").val(id);

     $("#editMenuModal").modal("show");
     var menuAttr = [];

     $.getJSON('${request.contextPath}/permission/getRoleEntity',{id:id},function(data){

             $.each(data.menuEntityList,function(i,item){
                 
                 menuAttr.push(item.id);

                 $.each(item.children,function(j,record){

                     menuAttr.push(record.id);

                 });// end each item.children

             });//end each data.menuEntityList


             $.getJSON('${request.contextPath}/permission/getAllMenu',function(data){

                 var menuListHtml = "" ;

                 $.each(data, function (i,item) {

                     var pid = item.id;

                     menuListHtml+="<optgroup label='"+item.name+"'>";

                     if(menuAttr.indexOf(id)>=0){
                         menuListHtml+="<option class='bg-red-active' menuId='"+pid+"' selected='selected' value='"+pid+"'>"+item.name+"</option>"
                     }else{
                         menuListHtml+="<option class='bg-red-active' menuId='"+pid+"' value='"+pid+"'>"+item.name+"</option>"
                     }

                     $.each(item.children, function (j,record) {

                         var name = record.name;
                         var id = record.id;

                         if(menuAttr.indexOf(id)>=0){
                             menuListHtml+="<option selected='selected' class='child'  value='"+id+"'>"+name+"</option>"
                         }else{
                             menuListHtml+="<option  value='"+id+"' class='child'    >"+name+"</option>"
                         }


                     });// end each children

                     menuListHtml+="</optgroup>";

                 });// end each data

                 $("#menuSelect").html(menuListHtml).selectpicker('render').selectpicker('refresh');


             });// end inner getJson

     });



 }

 function showEditPerm(id) {


     $("#uptRoleId").val(id);

     $("#editPermModal").modal("show");
     var permAttr = [];

     $.getJSON('${request.contextPath}/permission/getRoleEntity',{id:id},function(data){


         $.each(data.permissionEntityList,function(i,item){

             permAttr.push(item.id);


         });

         $.getJSON('${request.contextPath}/permission/getList',function(data){

             var permListHtml = "" ;

             $.each(data, function (i,item) {

                 var id = item.id;

                 if(permAttr.indexOf(id)>=0){
                     permListHtml+="<option  selected='selected' value='"+id+"'>"+item.name+"</option>"
                 }else{
                     permListHtml+="<option  value='"+id+"'>"+item.name+"</option>"
                 }

             });// end each data

             $("#permSelect").html(permListHtml).selectpicker('refresh');


         });// end inner getJson

 });

     }

 function centerModals() {
	    $('.modal').each(function(i) {
	        var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
	        top = top > 0 ? top : 0;   
	        $clone.remove();   
	        $(this).find('.modal-content').css("margin-top", top);   
	    });   
	}

 function queryData(){

     $(".ajaxLoading").fadeIn(10);
     var roleName = $("#roleName_query").val();

     $("#roleList").empty();

     $.getJSON('${request.contextPath}/permission/getRoleList',{roleName:roleName},function(data){
         //此处返回的data已经是json对象

         var tableContent ="<table id='roleTable' class='table table-bordered table-hover'>"
                 +"<thead><tr><th style='text-align: center;' >角色名</th>"
                 +"<th style='text-align: center;' >菜单权限</th>"
                 +"<th style='text-align: center;' >操作</th></tr></thead><tbody>";

         var tbodyContent ="";
         $.each(data,function(i,item){

             var roleName = item.roleName;
             var id = item.id;

             tbodyContent = tbodyContent+"<tr >"
                     +"<td >"+roleName+"</td>"
                     +"<td>";

             $.each(item.menuEntityList,function(j,parent){

                 tbodyContent+=parent.name+"-->[";

                 $.each(parent.children,function(k,child){

                     if(k==parent.children.length-1){
                         tbodyContent+=child.name;
                     }else{
                         tbodyContent+=child.name+",";
                     }


                 });

                 tbodyContent+="]</br>";

             });

             tbodyContent+="</td><td style='text-align: center;' ><a onclick='showEditMenu("+id+")'  class='btn btn-success' >编辑菜单</a>&nbsp;" +
                     "<a  class='btn btn-primary' onclick='showEditPerm("+id+")' >编辑权限</a>&nbsp;&nbsp;</td></tr>";

         });

         $("#roleList").append(tableContent+tbodyContent+"</tbody></table>");

         $('#roleTable').DataTable({
             "paging": true,
             "lengthChange": false,
             "searching": false,
             "ordering": true,
             "info": true,
             "autoWidth": true,
             "bDestroy":true,
             "sProcessing" : "正在读取数据..."
         });


         $(".ajaxLoading").fadeOut(1000);


     });// end getJSON

 }

 	$('#editMenuModal').on('show.bs.modal', centerModals);
 	$('#editPermModal').on('show.bs.modal', centerModals);
	$(window).on('resize', centerModals);
    
    </script>

  </body>
</html>
